<template>
  <div class="tobePaid">
    <div class="ordernull" v-if="JSON.stringify(order) == '[]'">
      <van-image
        width="150px"
        height="150px"
        src="//static.daojia.com/pt/project/h5-order-list/img/no-data.202566e.png"
      />
      <p class="subscribe">还没有待支付的订单，快去下单吧</p>
      <div>
        <van-button color="#e6454a" plain to="/home">立即预约</van-button>
      </div>
    </div>
    <van-cell-group v-for="(item, index) in order" :key="index">
      <van-cell>
        <template #title>
          <span class="icon">
            <van-icon
              class="iconfont icontiane"
              size="15px"
              color="#fff"
            ></van-icon>
          </span>
          <span class="custom-title" style="font-size: 16px">到家自营</span>
          <van-icon name="arrow" />
        </template>
        <template #right-icon>
          <span class="text">待支付</span>
        </template>
        <div slot="label">
          <van-cell-group>
            <van-cell>
              <div slot="icon" class="baojie">
                <img
                  class="img"
                  src="https://images.daojia.com/dop/custom/e3cffa59ed829a4b7f79e148e92ce81c.png?x-oss-process=image/resize,w_105,h_105/format,webp"
                />
                <span>{{ item.type }}</span>
              </div>
            </van-cell>
          </van-cell-group>
          <div class="time">
            <span>{{ item.time }}</span>
          </div>
          <div class="adress">
            <span>{{ item.address }}</span>
          </div>
        </div>
      </van-cell>
      <van-cell>
        <div class="btn">
          <van-button plain color="red" class="enter_btn" @click="topaid(item)"
            >支付</van-button
          >
          <van-button plain type="default" @click="$emit('delete', item.id)"
            >删除订单</van-button
          >
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "TobePaid",
  components: {},
  props: {
    order: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    topaid(order) {
      this.$router.push({
        name: "my-order",
        params: {
          order: order,
          cb: (i) => {
            store.commit("cart/updateActive", i);
          },
        },
      });
    },
  },
};
</script>
<style lang='less' scoped>
.ordernull {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .subscribe {
    color: #292d33;
    line-height: 17px;
    font-size: 17px;
  }
}
.icon {
  background-color: rgb(255, 66, 76);
  margin-right: 5px;
  border-radius: 30px;
}
.custom-title {
  margin-right: 5px;
}
.text {
  font-size: 17px;
  color: rgb(132, 140, 179);
  font-weight: 500;
}
.baojie {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.time {
  margin-bottom: 5px;
}
.time,
.adress span {
  font-size: 16px;
  color: #000;
}
.btn {
  float: right;
  .enter_btn {
    margin-right: 5px;
  }
}
</style>
